import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import store from '@/store'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName:'login' */'@/views/login/index.vue')
  },
  {
    path: '/',
    component: Layout,
    // redirect: '/home',
    meta: {
      requestAuth: true
    },
    children: [
      {
        path: '', // 默认子路由
        name: 'home',
        component: () => import(/* webpackChunkName:'home' */'@/views/home/index.vue')
      },
      {
        path: '/role',
        name: 'role',
        component: () => import(/* webpackChunkName:'role' */'@/views/role/index.vue')
      },
      {
        path: '/menu',
        name: 'menu',
        component: () => import(/* webpackChunkName:'menu' */'@/views/menu/index.vue')
      },
      {
        path: '/menu/addMenu',
        name: 'add-menu',
        component: () => import(/* webpackChunkName:'menu-create-edit' */'@/views/menu/create.vue')
      },
      {
        path: '/menu/editMenu/:id',
        name: 'edit-menu',
        component: () => import(/* webpackChunkName:'menu-create-edit' */'@/views/menu/edit.vue')
      },
      {
        path: '/resource',
        name: 'resource',
        component: () => import(/* webpackChunkName:'resource' */'@/views/resource/index.vue')
      },
      {
        path: '/resourceCategory',
        name: 'resource-category',
        component: () => import(/* webpackChunkName:'resource-category' */'@/views/resource/category.vue')
      },
      {
        path: '/course',
        name: 'course',
        component: () => import(/* webpackChunkName:'course' */'@/views/course/index.vue')
      },
      {
        path: '/course/new',
        name: 'new-course',
        component: () => import(/* webpackChunkName:'new-course' */'@/views/course/createCourse.vue')
      },
      {
        path: '/course/:courseId',
        name: 'edit-course',
        component: () => import(/* webpackChunkName:'edit-course' */'@/views/course/editCourse.vue'),
        props: true
      },
      {
        path: '/course/:courseId/sections',
        name: 'sections',
        component: () => import(/* webpackChunkName:'sections' */'@/views/course/sections.vue'),
        props: true
      },
      {
        path: '/course/:courseId/video',
        name: 'video',
        component: () => import(/* webpackChunkName:'video' */'@/views/course/video.vue'),
        props: true
      },
      {
        path: '/user',
        name: 'user',
        component: () => import(/* webpackChunkName:'user' */'@/views/user/index.vue')
      },
      {
        path: '/advert',
        name: 'advert',
        component: () => import(/* webpackChunkName:'advert' */'@/views/advert/index.vue')
      },
      {
        path: '/advert-space',
        name: 'advert-space',
        component: () => import(/* webpackChunckName:'advert-space' */'@/views/advert-space/index.vue')
      },
      {
        path: '/allocMenu',
        name: 'alloc-menu',
        component: () => import(/* webpackChunkName:'alloc-menu' */'@/views/role/allocMenu.vue'),
        props: route => ({ roleId: route.query.roleId }) // true
      },
      {
        path: '/allocResource',
        name: 'alloc-resource',
        component: () => import(/* webpackChunkName:'alloc-resource' */'@/views/role/allocResource.vue'),
        props: route => ({ roleId: route.query.roleId }) // true
      }
      // {
      //   path: '/example',
      //   name: 'examples_1',
      //   component: () => import('@/views/role/Example.vue')
      // }
    ]
  },
  {
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName:'404' */'@/views/error-page/404.vue')
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // if(to.path !== '/login')
  if (to.matched.some(item => item.meta.requestAuth)) {
    if (!store.state.user) {
      next({
        name: 'login',
        query: { // 通过此字段传递查询字符串参数
          redirect: to.fullPath // 把登陆成功需要返回的页面告诉登陆页面
        }
      })
    } else next()
  } else next()
})

export default router
